<!--
 * @Author: xuhong
 * @Date: 2020-04-30 08:52:46
 * @LastEditTime: 2020-05-04 10:12:01
 * @FilePath: \my-admin\src\pages\Administrator\arrange.vue
 -->


<template>
    <div class="page_student">
      <div class="student_header flex justify-content">
          <div class="header_right">
                <el-button type="primary">新建课程</el-button>
                <el-button type="primary">选择班级</el-button>
                <el-button type="primary">创建课程</el-button>
          </div>
          <div class="header_left flex-sub flex justify-end">
                <el-button type="danger">excel批量创建班级课程</el-button>
                <el-button type="danger">excel批量下载班级课程</el-button>
          </div>
      </div>
      <div class="student_content margin-top">
            <el-table
                :data="studentObj"
                @cell-dblclick="clickTable"
                border
                class="table"
                header-cell-class-name="table-header"
                style="width: 100%">
                <el-table-column 
                    prop="time"
                    label="日期"
                    align=center
                    width="119">
                </el-table-column>
                <el-table-column
                    prop=""
                    label="周一"
                    :width="width">
                </el-table-column>
                <el-table-column
                    prop="Tuesday"
                    property='Tuesday' :formatter='guardianNameFormatter'
                    label="周二"
                    :width="width">
                    <!-- <template slot-scope="scope">
                        <span>{{scope}}</span>
                     </template> -->
                </el-table-column>
                <el-table-column
                    prop="sex"
                    label="周三"
                    :width="width">
                </el-table-column>
                <el-table-column
                    prop="stuAdress"
                    label="周四"
                    :width="width">
                </el-table-column>
                <el-table-column
                    prop="stuBirthday"
                    label="周五"
                    :width="width">
                </el-table-column>
                <el-table-column
                    prop="enrolledDate"
                    label="周六"
                    :width="width">
                </el-table-column>
                <el-table-column
                    prop="postCode"
                    label="周日"
                    :width="width">
                </el-table-column>
            </el-table>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            width:185,
            studentObj:[
                {
                    time:{
                        text:"第一节"
                    },
                    Tuesday:{
                        nameClass:"语文",
                        teacher:"小明",
                        IdClass:2
                    }
                },
                {
                    time:{
                        text:"第二节"
                    }
                },
                {
                    time:{
                        text:"第三节"
                    }
                },
                {
                    time:{
                        text:"第四节"
                    }
                },
                {
                    time:{
                        text:"第五节"
                    }
                },
                {
                    time:{
                        text:"第六节"
                    }
                }
            ]
        }
    },
    methods:{
        guardianNameFormatter:(row, column, prop) => {
            if(row.hasOwnProperty('Tuesday')){
                 return row.Tuesday.nameClass +'<br/>'+ row.Tuesday.teacher
            }
            
            // console.log(row, column, prop)
            // return row.Tuesday.nameClass + row.Tuesday.teacher
        },
        clickTable:(row, column, prop) => {
            console.log( column)
        }
    }
}
</script>

<style>
.el-table .cell {
    text-align: center;
}
.el-table td{
    height: 100px;
}
</style>